<template>
<!--  <el-row>-->
<!--    <el-col :span="12">-->
      <el-select v-model="copyValue"
                 clearable
                 filterable
                 remote
                 :disabled="disabled"
                 :remote-method="remoteSearch"
                 :loading="loading"
                 popper-class="pop-class"
                 @change="updateValue"
                 @focus="showPopper"

      >
        <el-col :span="24" >
          <div>
            <el-option
                v-for="item in dataList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </div>
        </el-col>
        <el-col :span="24">
          <div style="float:right;margin-right:10px;padding-bottom: 10px">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="pages.page"
                :page-size="pages.limit"
                layout="total, prev, pager, next"
                :total="total">
            </el-pagination>
          </div>
        </el-col>
      </el-select>
<!--    </el-col>-->
<!--  </el-row>-->
</template>
<script>
import {requestByUrl} from "@/utils/tools";
import { isNull } from "@/utils";

export default {
  name: "SelectListPagination",
  props:{
    //绑定值
    value: [String,Number],
    remoteOptionsConfig:Object,
    disabled: Boolean
  },
  watch:{
    value:{
      handler:function(val){
        this.copyValue=val;
      },
      deep:true,
      immediate:true
    }
  },
  created() {
    // console.log(this.value)
    if (this.dataList.length == 0) {
      this.getOptionsList()
    }
  },
  methods:{
    showPopper(e) {
      delete this.params["_search"]
      this.getOptionsList()
    },
    // 远程搜索的方法
    remoteSearch(query) {
      if (!isNull(query)) {
        let _search = ""
        this.remoteOptionsConfig.searchFields.forEach(key=>{
          _search += key + ","
        })
        let _s = {
          "_search": _search.substring(0,_search.length-1)+ ":" + query
        }
        Object.assign(this.params, _s)
      } else {
        delete this.params["_search"]
      }
      this.getOptionsList()
    },
    //更新值
    updateValue(){
      this.$emit('input',this.copyValue);
    },
    //翻页
    handleCurrentChange(val) {
      // this.$emit('selectPageChange',val);
      this.getOptionsList()
    },
    getOptionsList() {
      if (!isNull(this.copyValue)) {
        this.dataList = []
        requestByUrl(`/admin/${this.remoteOptionsConfig.controller}/${this.copyValue}`,
            "get",Object.assign(this.params, this.pages)).then(res => {
              res.data.name = this.remoteOptionsConfig.fieldKey ? res.data[this.remoteOptionsConfig.fieldKey] : res.data.name
              this.dataList.push(res.data)
          // this.dataList = res.data.lists
          this.total = 1
        })
      } else {
        requestByUrl(`/admin/${this.remoteOptionsConfig.controller}/list`,
            this.remoteOptionsConfig.methods,
            Object.assign(this.params, this.pages)).then(res => {
          this.loading = false
          this.dataList = res.data.lists.map(ele=>{
            ele.name = this.remoteOptionsConfig.fieldKey ? ele[this.remoteOptionsConfig.fieldKey] : ele.name
            return ele
          })
          this.total = res.data.query.total
        })
      }
    }
  },
  data() {
    return {
      copyValue:this.value,
      dataList:[],
      pages:{
        page: this.remoteOptionsConfig.pages.pageNum,
        limit: this.remoteOptionsConfig.pages.pageSize
      },
      total:0,
      params: this.remoteOptionsConfig.params,
      loading: false
    };
  }
};

</script>
<style lang="scss">
  .pop-class{
    width: 500px;
  }
</style>
